<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs 
			  :list="list2" 
			  lineWidth="30" 
			  :current="curNow" 
			  itemStyle="padding:30rpx;" 
			  lineColor="#0782C9" 
			  :activeStyle="{color: '#0782C9',fontWeight: 'bold'}"
			  @change="sectionChange">
		</u-tabs>
		</u-sticky>
		<view>
			<view class="orderPadig">
				<view class="orderBox" @click="gotoDetails">
					<view class="listMrg">
						<text class="ordTit">北京协和医院订单</text>
						<view class="ordSatus">
							<text class="statusCol">待支付</text>
							<view class="ordInblk">
								<u-count-down :time="60 * 60 * 1000" format="HH:mm:ss" @change="onChange">
									<view>
										<text>
											<text>{{ timeData.hours+'0'}}</text>
											<text>:</text>
											<text>{{ timeData.minutes >=10?timeData.minutes:'0'+timeData.minutes}}</text>
											<text>:</text>
											<text>{{ timeData.seconds >=10?timeData.seconds:'0'+timeData.seconds}}</text>
										</text>
									</view>
								</u-count-down>
							</view>
						</view>
					</view>
					<view class="listMrg">2024-11-22 09:08:43</view>
					<view class="listMrg">就诊人：丰子恺</view>
					<view>订单类型：一对一专业陪诊（半天陪诊）</view>
				</view>
			</view>
			<view class="noData">
				<image class="dataImg" :src="require('@/static/orders/data.png')"></image>
				<view class="dataText">这里暂时什么都没有哦~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeData: {},
				curNow:0,
				list2: [{
						name: '全部'
					},
					{
						name: '待付款',
						badge: {
							isDot: true
						}
					}, {
						name: '已付款',
						badge: {
							isDot: false
						}
					},
					{
						name: '进行中',
						badge: {
							isDot: false
						}
					},
					{
						name: '已完成',
						badge: {
							isDot: false
						}
					}
				]
			};
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			sectionChange(e){
				console.log(e);
				this.curNow = e.index;
			},
			gotoDetails(){
				uni.navigateTo({
					url:'/subpages/pages-service/pay/payOrder'
				})
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: $uni-bg-color-grey;
	}
	.noData{
		position: relative;
	}
	.dataImg{
		display: block;
		width: 500rpx; 
		height: 560rpx; 
		margin: 0 auto;
	}
	.dataText{
		text-align: center;
		font-size: 24rpx;
		color: gray;
		position: absolute;
		width: 100%;
		bottom: 130rpx;
	}
	.orderPadig{
		padding: 20rpx;
	}
	.orderBox{
		padding:36rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 3rpx 3rpx 6rpx 0 #D3D0D0;
		margin-bottom: 20rpx;
		font-size: 24rpx;
	}
	.listMrg{
		margin-bottom: 20rpx;
	}
	.ordTit{
		font-weight: bold;
		font-size: 30rpx;
	}
	.ordSatus{
		display: inline-block;
		float: right;
		color: #0782C9;
	}
	.statusCol{
		color: #0782C9;
	}
	.ordInblk{
		display: inline-block;
	}
</style>